<template>
	<h1>Hello App!</h1>
	<p>
		<strong>Current route path:</strong> {{ $route.fullPath }}
	</p>

	<nav>
		<RouterLink to="/">Go to Home</RouterLink>
		<RouterLink to="/users/123">Go to User</RouterLink>
		<RouterLink to="/test/1/2/3/4/5">Go to NotFound【路由的匹配方法】</RouterLink>

		<ul>
			<li>动态路由匹配：</li>
			<li>
				<router-link to="/users/eduardo/posts/1">/users/eduardo/posts/1</router-link>
			</li>
			<li>
				<router-link to="/users/eduardo/posts/20">/users/eduardo/posts/20</router-link>
			</li>
		</ul>

		<nav>
			<h3>嵌套路由：</h3>
			<router-link to="/user/shan">/user/shan</router-link>
			<br />
			<router-link to="/user/shan/profile">/user/shan/profile</router-link>
			<br />
			<router-link to="/user/shan/posts">/user/shan/posts</router-link>
		</nav>

		<nav>
			<h3>重定向和别名：</h3>
			<router-link to="/home">从 /home 重定向到 /</router-link>
			<br />
			<router-link to="/bieming">/bieming: 别名</router-link>
			<br />
			<router-link to="/home1">/home1: 别名的初path</router-link>
		</nav>

		<nav>
			<h3>路由传参方式：</h3>
			<router-link to="/article/321">/article/321</router-link>
			<br />
			<router-link to="/article/123?highlight=true">/article/123?highlight=true</router-link>
			<br />
			<router-link to="/product/123">/product/123</router-link>
		</nav>

		<nav>
			<h3>二、路由导航 + kepp-alive：</h3>
			<router-link to="/a">/a</router-link>
			<br />
			<router-link to="/b">/b</router-link>
		</nav>

		<nav>
			<h3>同步组件+异步组件+动态组件+缓存组件：</h3>
			<router-link to="/async-component">/async-component</router-link>
		</nav>

		<nav>
			<h3>滚动行为 scrollBehavior 之 to.hash：</h3>
			<router-link to="/scrollBehavior#team">/scrollBehavior#team</router-link><br />
			
			<!-- router-link 组件的额外参数验证 -->
			<router-link to="/scrollBehavior#team" aria-current-value="step" active-class="active-link"
				exact-active-class="exact-active" inactive-class="inactive-link">验证额外属性</router-link>
			<!-- router-link 作用域插槽 -->
			<router-link to="/home1" active-class="active" v-slot="{ isActive }">
				<div class="nav-item">
					<i class="icon-bell"></i>
					<span>通知</span>
					<span v-if="isActive" class="badge">新</span>
				</div>
			</router-link>
			<!-- 与原生 HTML 属性的结合 -->
			<router-link
			  to="/home1"
			  title="隐私政策"
			  target="_blank"
			  rel="noopener noreferrer"
			>隐私政策</router-link>
		</nav>

		<nav>
			<h3>Vue Router 组合式 API "useLink" 父子组件实例</h3>
			<h5>此为 父子组件实例,不需要router-view呢!</h5>
			<!-- <router-link to="/useLink">/useLink</router-link> -->
			<UseLink to="/useLink" :showBadge="true" @before-navigate="handleBeforeNavigate">
				联系我们
			</UseLink>
			<br />
			<router-link to="/tailwind">验证 tailwind css 整合效果</router-link>
		</nav>
		
		<nav>
			<h3>导航故障：</h3>
			<router-link to="/navigation-failure">/navigation-failure</router-link>
		</nav>
		
		<nav>
			<h3>浏览器窗口状态监听：</h3>
			<router-link to="/document-visibilityState">/document-visibilityState</router-link>
		</nav>
		
		<nav>
			<h3>集成 Vue-Audio-Visual 音频可视化组件库：</h3>
			<router-link to="/vueAudioVisual">/vueAudioVisual</router-link>
		</nav>
	</nav>

	<!-- <main>
		<RouterView />
	</main> -->

	<!-- 二、路由导航 + kepp-alive -->
	<router-view v-slot="{ Component, route }">
		<!-- {{route == $route}} => true -->
		<pre>{{route}} <b>找寻 route.hash</b></pre>
		<keep-alive>
			<component :is="Component" v-if="$route?.meta?.keepAlive" :key="route.path" />
		</keep-alive>
		<component :is="Component" v-if="!$route?.meta?.keepAlive" :key="route.path" />
	</router-view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import UseLink from './views/use/useLink.vue'

	const router = useRouter()
	const route = useRoute()

	const handleBeforeNavigate = (to) => {
		console.log('即将导航到:', to)
		// 可以在这里添加权限检查等逻辑
		return true // 返回false可以阻止导航
	}
</script>